這一篇文章主要介紹那些常用但不知該如何分類的方法XD
也算是增加我的理解這樣。
將輸入的字串轉成整數。
// 語法
parseInt(string, radix);
參數說明：
來個練習吧！
以下問題來自 GPT
// 基本轉換
const str = "42";
const num = parseInt(str, 10);
console.log(num); // 42
// 指定進制
const str = "1010";
const number = parseInt(str, 2); // 指定用二進制讀字串
console.log(number); // 10。回傳結果一律為十進制。
// 混有文字與數字的字串
const str = "1A2B";
const num = parseInt(str, 10); // 讀到 A 就停了
const num2 = parseInt(str, 16); // 無痛轉換
const num3 = parseInt(str, 2); // 讀到 A 就停了
console.log(`${num}, ${num2}, ${num3}`); // 1, 6699, 1
解析字串並回傳為十進位制的浮點數
parseFloat(string)
參數說明
toString() 轉成字串再解析來練習一下吧！以下問題來自 GPT
// 基本
const str = "3.14";
const number = parseFloat(str);
console.log(number); // 3.14
// 科學記號轉換
const str = "1.23e-4"; // 1.23 x 10^(-4)
const num = parseFloat(str);
console.log(num); // 0.000123
創建一個 JavaScript Date 物件以指向某特定的時間點（年、月、日，甚至到毫秒）。Data 物件儲存的數值為毫秒，是基於世界標準時間（UTC）的時間。
可傳入參數來指定時間，也可不傳入參數以回傳當前時間。
// 語法
new Date();
new Date(milliseconds);
new Date(dateString);
new Date(year, month[, day[, hour[, minutes[, seconds[, milliseconds]]]]]);
參數說明
Date.parse() 解析（符合 IETF-compliant RFC 2822 timestamps 及 version of ISO8601 格式）。YYYY-MM-DDTHH:mm:ss.sssZ，它是 ISO 8601 的簡化，以下說明如何使用
Date.prototype 方法：
Date.now()：回傳對應於當前時間的數值。由 1970-01-01 00:00:00 UTC 至當前的毫秒數。Date.parse()：解析字串所表示的時間。由 1970-01-01 00:00:00 UTC 至當前的毫秒數。由於瀏覽器的不同，會有不同結果，故不建議使用。Date.UTC()：須傳入二至七個參數（year、month、day、hour、minutes、seconds、milliseconds）。得到由 1970-01-01 00:00:00 UTC 到該指定日期的毫秒數。// 超出 value 的限制範圍
const time = new Date(8640000000000001);
console.log(time); // Invalid Date
// 以 new Date() 創建了一個javascript Date 物件
const time = new Date();
const hours = time.getHours(); // 可以使用 date 物件的方法
console.log(time); // 2023-09-25T08:32:42.951Z
console.log(hours); // 16，拿到當地時間的小時值
// 使用 toString 會將時區轉換為當地時間
console.log(time.toString()); // Mon Sep 25 2023 16:56:36 GMT+0800 (台北標準時間)
// 以 function 形式呼叫(不用 new)，會回傳當下時間的純字串（純文字）
const time = Date();
console.log(time); // Mon Sep 25 2023 14:47:38 GMT+0800 (台北標準時間)
各種建立 Date 物件的方式
const today = new Date();
const birthday = new Date("December 17, 1995 03:24:00");
const birthday = new Date("1995-12-17T03:24:00");
const birthday = new Date("1995-12-17");
const birthday = new Date("1995"); // 除了年之外皆套用預設值
const birthday = new Date(1995, 11, 17);
const birthday = new Date(1995, 11, 17, 3, 24, 0);
來練習一下吧！以下問題來自 GPT
// 取得特定日期的詳細資訊
const specificDate = new Date("2023-09-15T10:30:00");
const year = specificDate.getFullYear();
const month = specificDate.getMonth(); // 月份從0開始，所以9代表10月
const day = specificDate.getDate();
const hours = specificDate.getHours();
const minutes = specificDate.getMinutes();
const seconds = specificDate.getSeconds();
// Year: 2023, Month: 9, Day: 15
console.log(`Year: ${year}, Month: ${month + 1}, Day: ${day}`);
console.log(`Time: ${hours}:${minutes}:${seconds}`); // Time: 10:30:0
設一個全域的定時器，計時結束後執行指定的函式或 code。
// 語法
setTimeout(code); // 不建議使用
setTimeout(code, delay); // 不建議使用
setTimeout(functionRef);
setTimeout(functionRef, delay);
setTimeout(functionRef, delay, param1);
setTimeout(functionRef, delay, param1, param2);
setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN);
參數說明
clearTimeout() 來取消定時器。每個定時器都有自己的編號。注意：
setTimeout() 中的 this 指向可能會與期望的不同。setTimeout() 本身是非同步（asynchronous）函式，它不會暫停其他函式的執行，所以不能使用它來使其他函式暫停，如下例。要讓一個函式完成後才觸發另個函式，需要使用 Promise。 // 例子來自 MDN
setTimeout(() => {
console.log("这是第一条消息");
}, 5000);
setTimeout(() => {
console.log("这是第二条消息");
}, 3000);
setTimeout(() => {
console.log("这是第三条消息");
}, 1000);
// 得到的結果：
// 这是第三条消息
// 这是第二条消息
// 这是第一条消息
clearTimeout()用來清除 setTimeout() 的方法。
// 語法
scope.clearTimeout(timeoutID)
setTimeout()時得到的 ID
clearTimeout() 不會執行，也不會拋出任何異常的訊息。用 setTimeout() 與 clearTimeout() 來個練習吧！例子來自 GPT
// 以 setTimeout() 執行函式
function greet() {
console.log("Hello, otter!");
};
const timer = setTimeout(greet, 1000); // 延遲後出現 Hello, otter!
// 以 clearTimeout() 中止函式
function greet() {
console.log("Hello, otter!");
};
const timer = setTimeout(greet, 1000);
clearTimeout(timer); // 原本的 timer 執行被中止
// 創建一個計時器序列，依次顯示數字 1 到 5，每隔 1 秒顯示一個數字。
// 寫法1：使用 promise 完成需求；易讀性較佳
const delay = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, time);
});
};
(async () => {
console.log("Start");
for (let i = 0; i < 5; i++) {
console.log(i);
await delay(1000);
}
console.log("End");
})();
// 寫法2：使用 callbackFn；易讀性較差
let num = 1;
const delay2 = () => {
console.log(num);
if (num >= 5) {
return;
}
num++;
setTimeout(delay2, 1000);
};
delay2();
重複呼叫某個函式或執行一段 code，每次呼叫或執行間都間隔相同的時間。
const intervalID = setInterval(function, [delay, arg1, arg2, ...]);
const intervalID = setInterval(function[, delay]);
const intervalID = setInterval(code, [delay]);
參數說明：
eval() 具有一樣的安全風險，故不建議使用直接傳入 code 的方式。clearInterval() 來清除定時器。注意：
setInterval與clearInterval、setTimeout與clearTimeout）取消由 setInterval() 設定的定時器任務。
scope.clearInterval(intervalID)
來個練習吧！例子來自 GPT
// 簡單的每秒數字計數器，數到五時停止 timer
let num = 0;
let timer;
function count() {
console.log(num);
num++;
}
timer = setInterval(function () {
if (num === 5) {
clearInterval(timer);
}
count();
}, 1000);
資訊量有點太多，需要消化沉澱一下XD
再接再厲！
參考資料
iThome鐵人賽
看影片追技術